<template>
  <view>
    <view>
      <u-form :model="form" ref="uForm" style="margin: 0 20rpx;">
        <u-form-item label-width="145" label="*是否离校" prop="isOut">
          <u-input :selectOpen="show1" type="select" placeholder="请选择" @click="show1 = true" v-model="form.isOut"/>
        </u-form-item>
        <u-form-item label-width="145" label="*开始时间" prop="beginTime">
          <u-input :selectOpen="show && isBegin" type="select" placeholder="请选择" v-model="form.beginTime" @click="beginDateTime" />
        </u-form-item>
        <u-form-item label-width="145" label="*结束时间" prop="endTime">
          <u-input :selectOpen="show && !isBegin" type="select"  placeholder="请选择" v-model="form.endTime" @click="endDateTime"  />
        </u-form-item>
        <u-form-item label-width="200"  label="*本人联系电话" prop="phoneNumber"><u-input v-model="form.phoneNumber" /></u-form-item>
        <u-form-item label-width="165"  label="*紧急联系人" prop="emergencyContact"><u-input v-model="form.emergencyContact" /></u-form-item>
        <u-form-item label-width="200"  label="*紧急联系电话" prop="emergencyContactNumber"><u-input v-model="form.emergencyContactNumber" /></u-form-item>
        <u-form-item label-width="220"  label="*请假(外出)原因"></u-form-item>
        <u-form-item prop="reason">
          <u-input type="textarea" :height="100" :auto-height="true" :border="true" v-model="form.reason" />
        </u-form-item>
        <u-form-item prop="leaveTo" label-width="145"  label="*请假去向"><u-input v-model="form.leaveTo" /></u-form-item>
        <u-form-item label-width="220"  label="*备注"></u-form-item>
        <u-form-item prop="remark">
          <u-input type="textarea" :height="100" :auto-height="true" :border="true" v-model="form.remark" />
        </u-form-item>
      </u-form>
      <view style="text-align: center;margin-top: 20rpx;">
        <u-button size="medium" shape="circle" type="primary" @click="submit" :ripple="true" ripple-bg-color="#a0cfff">提交</u-button>
      </view>
    </view>
    <u-select @confirm="confirm1" @cancel="show1 = false" v-model="show1" :list="list"></u-select>
    <u-picker mode="time" v-model="show" :params="params" @confirm="confirm" @cancel="cancel"></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true
      },
      show1: false,
      show: false,
      isBegin: false,
      list: [
        {
          value: 1,
          label: '是'
        },
        {
          value: 2,
          label: '否'
        }
      ],
      // form: {
      // 		isGoOut: 0,
      // 		isOut: '',
      // 		beginTime: '',
      // 		endTime: '',
      // 		phoneNumber: '',
      // 		emergencyContact: '',
      // 		emergencyContactNumber: '',
      // 		reason: '',
      // 		leaveTo: ''
      // 	},
      form: {
        beginTime: "2020-11-21 15:27:28",
        emergencyContact: "飞哥",
        emergencyContactNumber: "15368760414",
        endTime: "2020-11-21 15:27:30",
        isOut: "是",
        isGoOut: 1,
        leaveTo: "牛街",
        phoneNumber: "15368760414",
        reason: '生病',
        remark: '无'
      },
      rules: {
        isOut: [
          {
            required: true,
            message: '是否离校不能为空',
            trigger: 'blur'
          }
        ],
        beginTime: [
          {
            required: true,
            message: '开始时间不能为空',
            trigger: 'blur'
          }
        ],
        endTime: [
          {
            required: true,
            message: '结束时间不能为空',
            trigger: 'blur'
          }
        ],
        phoneNumber: [
          {
            required: true,
            pattern: /^1[3|4|5|7|8]\d{9}$/,
            message: '联系电话格式不对',
            trigger: 'blur'
          }
        ],
        emergencyContact: [
          {
            required: true,
            message: '紧急联系人不能为空',
            trigger: 'blur'
          }
        ],
        emergencyContactNumber: [
          {
            required: true,
            pattern: /^1[3|4|5|7|8]\d{9}$/,
            message: '联系电话格式不对',
            trigger: 'blur'
          }
        ],
        reason: [
          {
            required: true,
            message: '请假理由不能为空',
            trigger: 'blur'
          }
        ],
        leaveTo: [
          {
            required: true,
            message: '请假去向不能为空',
            trigger: 'blur'
          }
        ],
      }
    }
  },
  onLoad() {
    uni.$emit("setVuexUserInfo",{user:null,isLoginPage: false});
  },
  methods: {
    confirm(v){
      if(v !== null && v !== undefined){
        let datetime = v.year + "-" + v.month + "-" + v.day + " " + v.hour + ":" + v.minute + ":" + v.second;
        if(this.isBegin){
          this.form.beginTime = datetime;
        }else {
          this.form.endTime = datetime;
        }
      }
    },
    confirm1(v){
      if(v !== null && v !== undefined){
        this.form.isOut = v[0].label;
        this.form.isGoOut = v[0].value;
      }
    },
    cancel(){
      this.show = false;
    },
    submit() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          this.$u.api.saveAskForLeave(this.form).then(res => {
            this.$u.toast('提交成功！')
            uni.$emit("apply");
            // #ifndef H5
            uni.navigateBack({
              delta: 1
            })
            // #endif
            // #ifdef H5
            history.back();
            // #endif
          })
        }
      })
    },
    beginDateTime(){
      this.isBegin = true;
      this.show = true;
    },
    endDateTime(){
      this.isBegin = false;
      this.show = true;
    }
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  filters:{

  }
}
</script>

<style>

</style>
